<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .box {
            border: 1px solid black;
            width: 200px;
        }
        .title{
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 
        + 多选按钮单独出现以状态作为应用结果，分组出现以数据记录作为应用结果；
        + 多选按钮被选中后的对应值，由value提供，如果未提供默认值为 on
        + 通过checked 布尔类型属性的描述，可以构建默认选中项【可以同时具有多个默认选中项】
        + JS 操作时针对的是 checkbox DOM 对象的 DOM属性 checked；
                            该属性虽然名字和HTML的checked属性名称相同，但不存在关联关系
                            所以html的checked属性只提供默认页面时的选中描述，后续不再参与checkbox变化调整 -->
    <!-- 
        状态记录：无分组、无数据，主要通过 checked DOM属性的boolean取值描述选中状态
    -->
    <!-- <input type="checkbox" checked>
    <br><br> -->
    <!-- 
        数据记录：配合分组、配置数据，通过记录选中选项的所有数据，完成选中数据的切换操作
            + 复习按钮的分组，在页面中无明显表现形式，但在数据传递过程中同组的数据会以相同参数名的方式发生
                            【传递实际上是一个变量对应的数组取值】
    -->
    <!-- <form action="" method="get">
        <input type="checkbox" value="html" name="skill">HTML
        <input type="checkbox" value="css" name="skill">CSS
        <input type="checkbox" value="javascript" name="skill">JAVASCRIPT
        <input type="checkbox" value="vue" name="skill">VUE
        <br>
        <input type="submit" value="提交">
    </form> -->
    <hr>
    <div id="app">
        <pre v-pre class="note">
        v-model 为 v-bind 和 v-on 的语法糖操作，可以在页面开发时一次性完成属性和事件的同时绑定
            + v-model的属性绑定和v-bind存在细微操作差别
            + v-model的事件绑定和v-on存在细微操作差别
        
        v-model指令只能被应用于表单操作元素【input:text,input:radio,input:checkbox,textarea,select……】
        v-model指令对表单元素的操作行为，会因为不同功能的表单元素存在绑定差别
        v-model指令的=取值不能定义除变量以外的其它数据格式

        v-model 使用
            1、输入标签的操作
            2、选择标签的操作
        </pre>
        <h4>选择标签的v-model操作</h4>
        <h5>checkbox下拉列表</h5>

        <p>v-model对checkbox的状态操作</p>
        <pre>
            vue只关心 复习按钮的 checked 属性变化 和 状态控制数据 true-value、false-value的取值
                + true-value 默认值为 true ； false-value 默认值为 false
                + 对于状态操作的复选框 value 和 name 不会在参与到程序运行中去
        </pre>
        <p>flag:{{ flag }}</p>
        <div class="box">
            <p class="title">游玩协议</p>
            <p>asdadadssa</p>
            <div>
                <input type="checkbox" :checked="flag" @change="flag = $event.target.checked">
                已阅读
            </div>
        </div>
        <div class="box">
            <p class="title">游玩协议</p>
            <p>asdadadssa</p>
            <div>
                <input type="checkbox" v-model="flag">
                已阅读
            </div>
        </div>
        <p style="color:red" v-show="flag">游戏开始</p>
        <hr>
        <p>flag1:{{ flag1 }}</p>
        <div class="box">
            <p class="title">游玩协议</p>
            <p>asdadadssa</p>
            <div>
                <input type="checkbox" true-value="已阅读" false-value="未阅读" v-model="flag1">
                已阅读
            </div>
        </div>

        <hr>
        <p>v-model对checkbox的数据操作</p>
        <pre>
        1、将checkbox双向绑定由状态操作切换到数据操作，只需要让v-model取值为 array或者set集合
        2、此时复选按钮必须提供value值为参考取值进行操作判断【状态属性 true-value和false-value失效】
        3、数据模式的复选按钮，将自动启用分组功能
            + v-model在复选按钮操作的时的数据记录是无序的，所以基于数组顺序和下标的数据操作功能都可能出现错误
            + 如果此时需要将部分复选框处于默认选中状态，只需要在对应的记录数据变量中增加对应的取值即可 
        </pre>
        <p>skills:{{ skills }}</p>
        <input type="checkbox" value="html" v-model="skills">HTML
        <input type="checkbox" value="css" v-model="skills">CSS
        <input type="checkbox" value="javascript" v-model="skills">JAVASCRIPT
        <input type="checkbox" value="vue" v-model="skills">VUE
        <!-- <input type="checkbox" value="vue" v-model="skills">VUE -->

        <br>
        <p>skills2:{{ skills2 }}</p>
        <input type="checkbox" value="html" v-model="skills2">HTML
        <input type="checkbox" value="css" v-model="skills2">CSS
        <input type="checkbox" value="javascript" v-model="skills2">JAVASCRIPT
        <input type="checkbox" value="vue" v-model="skills2">VUE

    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    flag:false,
                    flag1:"已阅读",
                    skills:["html","vue"],
                    skills2:new Set(["html","css"])

                }
            }
        }).mount("#app");
    </script>
</body>

</html>